<template>
  <div>
    <transition :name="transitionName">
      <keep-alive :include="['index']">
        <router-view></router-view>
      </keep-alive>
    </transition>

    <tabBar v-if="$store.state.showTab"></tabBar>
  </div>

</template>

<script >
  import tabBar from './comment/tabbar/tabbar';
  export default {
    data(){
      return{
        transitionName:'',
      }
    },
    watch: {//使用watch 监听$router的变化
      '$route' (to, from) {
        if(to.name==='mine' || to.name==='index' || to.name==='logregist'|| to.name==='trans'){
          this.$store.state.showTab = true
        }else {
          this.$store.state.showTab = false
        }
        if(to.meta.index > 0){
          if( to.meta.index < from.meta.index){
            this.transitionName = 'slide-right';

          }else{
            this.transitionName = 'slide-left';
          }
        }else if(to.meta.index == 0 && from.meta.index > 0){
          this.transitionName = 'slide-right';
        }else if(to.meta.index == 0 && from.meta.index == 0){
          this.transitionName = '';
        }
      }
    },
    components: {tabBar},
    methods:{

    },
    created(){
      if ( localStorage.getItem('playList')!=null ){
        this.$store.state.playList = JSON.parse(localStorage.getItem('playList'));
      }
    }
  };
</script>

<style scoped="scoped" >

</style>
